<template>
    <view>
        <view class="mians">
            <view class="miansPlan">
                <view class="plans_L">
                    <view class="L_img">
                        <image mode="aspectFill" :src="eleImgArr[tIndex].url"></image>
                    </view>
                </view>
                <view class="plans">
                    <view class="plans_R">
                        <view class="R_conten">
                            <view class="R_tit">基础信息</view>
                            <view class="R_row"><text>品牌:</text><text>{{ objData.brand || '--' }}</text> </view>
                            <view class="R_row"><text>型号:</text><text>{{ objData.model || '--' }}</text></view>
                            <view class="R_row"><text>启用日期:</text><text>{{ resTimes(objData.currentTime ||
                                objData.startDate) }}</text></view>
                        </view>
                    </view>
                    <view class="plans_R R_bg">
                        <view class="R_conten conten_bg">
                            <view class="R_tit R_tit_bg">规格信息</view>
                            <!-- <view class="R_row R_row_bg">
                                <text>品牌:</text><text>{{ objData.brand || '--' }}</text>
                            </view>
                            <view class="R_row R_row_bg">
                                <text>型号:</text><text>{{ objData.model || '--' }}</text>
                            </view> -->
                            <view class="R_row R_row_bg" v-if="objData.specs">
                                <text>规格:</text><text>{{ objData.specs || '--' }}</text>
                            </view>
                            <view class="R_row R_row_bg noData" v-else>还没有规格哦</view>

                        </view>
                    </view>

                </view>
            </view>
        </view>

    </view>
</template>

<script>
import { getElevatorFoundation } from '@/apis/elevator.js';
// import { hanleToken } from '@/utils/utils.js';
export default {
    data() {
        return {
            eleImgArr: [
                { url: 'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231101/b24cf08b0405466c07706bb1dbc9ebdb.png', name: '机房', ids: 1 },
                { url: 'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231101/f73390d25b557f686bc9cefc706db3ff.png', name: '层站', ids: 2 },
                { url: 'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231101/9e85df21b8c7761c8a18a90db804c7d7.png', name: '轿厢', ids: 3 },
                { url: 'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231101/955f3f075bf7dfdd8f3b1788e0c9f68c.png', name: '/底坑', ids: 4 },
                { url: 'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231101/422145f8d9f6fb43e32e590aa4c8068f.png', name: '/井道', ids: 5 },
                { url: 'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231108/ea804eac0900e9b5108a27afb85fbe8c.png', name: 'ss', ids: 6 },

            ],
            objData: {},
            tIndex: 0
        };
    },
    props: {
        elevatorId: {
            type: String,
            default: ''
        },
        partMsg: {
            type: Object,
            default: () => {
                return {};
            }
        },
        flagMsg: {
            type: Object,
            default: () => {
                return {};
            },
        },
    },
    watch: {
        'partMsg.id': {
            handler(newVal) {
                if (newVal != 0) {
                    let objs = this.partMsg || {};
                    if (Object.keys(objs).length > 0) {
                        this.tIndex = 5;
                        this.eleImgArr.map(item => {
                            if (objs.routeNmae.indexOf(item.name) !== -1) {
                                this.tIndex = item.ids - 1;
                            }
                        });
                    }
                }
                this.initData(newVal, this.elevatorId);
            },
            immediate: true
        },

    },
    mounted() {
        // this.initData(this.partId,this.elevatorId)
    },
    methods: {

        initData(partId, elevatorId) {
            return new Promise(() => {
                getElevatorFoundation({
                    partId,
                    elevatorId,
                    floorStandIds: this.flagMsg.id ? this.flagMsg.id : '',
                }).then((data) => {
                    if (data.code === 200) {
                        this.objData = data.data || {};
                    }
                });
            });
        },
        resTimes(str) {
            if (str) {
                return str.replaceAll('-', '/').slice(0, 10);
            }
            return '--';
        }

    }
};
</script>

<style lang="scss" scoped>
.mians {
    background: #fff;
}

.miansPlan {
    width: 680rpx;
    margin: 0 auto;
    display: flex;
    // border: 2rpx red solid;  
    padding: 40rpx 0;

    .plans_L {
        box-sizing: border-box;
        //   border: 2rpx red solid;  

        flex: 1;

        .L_img {
            width: 310rpx;
            background: transparent url('https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231108/cbf726cfbda2f6bf9f81b03789e87429.png') no-repeat center;
            background-size: 100%;

            image {
                width: 240rpx;
                height: 700rpx;
            }

        }
    }

    .plans {
        display: flex;
        flex-direction: column;
        width: 330rpx;

    }

    .plans_R {
        //   flex: 1;
        // width: 408rpx;
        height: 176rpx;
        background: linear-gradient(135deg, #535de4, #6890ee 63%, #7596ea);
        border-radius: 24rpx 0px 0px 24rpx;
        padding: 20rpx;
        margin-right: -40rpx;

        .R_conten {
            font-size: 12px;

            .R_tit {
                font-weight: 600;
                color: #ffffff;
                margin-bottom: 16rpx;
            }

            .R_row {
                font-weight: 400;
                color: #fff;
                display: flex;
                margin-bottom: 12rpx;

                text:nth-of-type(1) {
                    width: 120rpx;
                    display: inline-block;
                    color: #dbdef6;
                }

                text:nth-of-type(2) {
                    width: 242rpx;
                    display: inline-block;
                }

            }
        }
    }

    .R_bg {
        background: #f6f8fc;
        margin-top: 20rpx;

        .conten_bg {
            .R_tit_bg {
                color: #5267D4;
            }

            .R_row_bg {
                text:nth-of-type(1) {
                    color: #333;
                    font-weight: 400;
                }

                text:nth-of-type(2) {
                    color: #333;
                    font-weight: 500;
                }
            }

            .noData {
                margin: 50rpx 0 0 100rpx;
                color: #ccc;
            }

        }
    }
}
</style>